<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2022/3/31
  Time: 12:38
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<html>
<head>
    <title>图书在线借阅系统</title>
    <link rel="stylesheet" type="text/css" href="lib/layui/css/layui.css">
    <link rel="stylesheet" type="text/css" href="lib/layui/css/book.css">
    <script type="text/javascript" src="lib/layui/layui.js"></script>
    <script src="lib/js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>


    <style>
        body {
            background: url("lib/Images/bg-3.jpg") no-repeat;
            background-size: cover;
        }
    </style>
</head>
<body>
<div id="memupdate" class="layui-container-box" style="width: 500px;background-color: #cccccc; margin-left: 250px; margin-top: 0px;">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>修改会员信息</legend>
    </fieldset>
    <form action="member.let?type=mem_modify&id=${member.id}&pwd=${member.pwd}" class="layui-form" method="post" style="margin-left: 20px">
        <div class="layui-form-item">
            <label class="layui-form-label">卡号</label>
            <div class="layui-input-block">
                <input type="text" name="id"  value="${member.id}" lay-verify="id" autocomplete="off" placeholder="请输入卡号" class="layui-input" disabled="disabled">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">真实姓名</label>
            <div class="layui-input-block">
                <input type="text"  name="mname" value="${member.mname}" lay-verify="name" autocomplete="off" placeholder="请输入真实姓名" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block">
                <c:if test="${member.sex=='男'}">
                    <input type="radio"   name="sex" value="男" title="男" checked>
                    <input type="radio" name="sex" value="女" title="女">
                </c:if>
                <c:if test="${member.sex=='女'}">
                    <input type="radio"   name="sex" value="男" title="男" >
                    <input type="radio"  name="sex" value="女" title="女"checked>
                </c:if>

            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-block">
                <input type="password" name="pwd" value="${member.pwd}" lay-verify="password" autocomplete="off" placeholder="请输入密码" class="layui-input" disabled>
            </div>
        </div>
        <div class="layui-form" >
            <div class="layui-form-item">
                <label class="layui-form-label">会员类型</label>
                <div class="layui-input-block">
                    <select  name="mtname" lay-filter="sel" class="selectDate" aria-invalid="false" >
                        <c:forEach items="${memberTypes}" var="mt">
                            <c:if test="${mt.id==member.typeId}">
                                <option value="${mt.id}">${mt.mtname}</option>
                            </c:if>
                            <c:if test="${mt.id!=memeber.typeId}">
                                <option value="${mt.id}">${mt.mtname}</option>
                            </c:if>
                        </c:forEach>


                    </select>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">金额</label>
            <div class="layui-input-block">
                <input type="number" value="${member.balance}"  name="balance" lay-verify="required|balance" autocomplete="off" placeholder="请输入充值金额" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">电话</label>
            <div class="layui-input-block">
                <input type="text"  value="${member.tel}" name="tel" lay-verify="required|tel" autocomplete="off" placeholder="请输入电话" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">证件编号</label>
            <div class="layui-input-block">
                <input type="text"  value="${member.idNumber}" name="idNumber" lay-verify="required|idNumber" autocomplete="off" placeholder="请输入证件编号" class="layui-input">
            </div>
        </div>


        <div class="layui-form-item">
            <div class="layui-input-block" style="position: relative;">
                <button class="layui-btn" lay-submit="" lay-filter="demo1" style="width: 80px;position:absolute; left: -150px;bottom: -5px">立即提交</button>
                <button type="reset" class="layui-btn" style="width: 80px;position: absolute; bottom: -5px;right: 120px"><a href="mem_list.jsp" style="color:white;">取消</a></button>
            </div>
        </div>
    </form>
</div>
</body>
</html>
<script type="text/javascript">
    layui.use('form',function () {
        var form = layui.form;

        //获取下拉框选中的值
        form.on('select(mtname)',function(data){
                category = data.value;
                console.log(category);
            mtname = data.elem[data.elem.selectedIndex].text;
                console.log(mtname);
                form.render('select');
            }


        );

        //自定义验证规则
        form.verify({
            // username: function(value){
            //     if(value.length == 0){
            //         return "用户名不能为空";
            //     }
            // },
            id:[/^\d{0,7}$/,"卡号必须是0~7位数字"],
            password: [/^[A-Za-z0-9]+$/,"密码必须由数字和字母组成"],
            name: [/^[\u4e00-\u9fa5]+$/,"请输入正确的姓名"],
            tel: [/^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/,"请输入正确的电话"],
            idNumber: [/^\d{15}|\d{}18$/,"请输入正确的证件编号"]
        })
    })
</script>


